<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- flex布局的常见属性 -->


    <!-- 父项常用的属性 ：
            1.flex-direction：设置主轴的方向(即项目的排列方向)
                注：主轴和侧轴是变化的 就看flex-direction设置谁为主轴 剩下的就是侧轴 而我们的子元素是根据主轴来排列的
                
                属性值                 解释说明
                row                 默认值从左到右
                row-reverse         从右到左
                column              从上到下
                column-reverse      从下到上

            2.justify-content:设置主轴上的子元素的排列方式
                属性值                  解释说明
                flex-start           默认值 从头部开始 如果主轴是x轴 则从左到右
                flex-end             从尾部开始排列
                center               在主轴居中对齐
                space-around         平分剩余空间
                space-between        先两边贴边 再平分剩余空间
            3.flex-wrap:设置子元素是否换行
                属性值                  解释说明
                nowrap                默认值 不换行
                wrap                  换行
            4.align-content:设置侧轴上的子元素的排列方式（多行）并且只能用于子项出现换行的情况（多行） 在单行下是没有效果的
                属性值                     解释说明
                flex-start              在侧轴的头部开始排列
                flex-end                在侧轴的尾部开始排列
                center                  在侧轴中间显示
                space-around            子项在侧轴平分剩余空间
                space-between           子项在侧轴先分布在两头 再平分剩余空间
                stretch                 设置子项元素高度平分父元素高度
                

            5.align-items:设置侧轴上的子元素的排列方式（单行）
                属性值                  解释说明
                flex-start            默认值 从上到下
                flex-end              从下到上
                center                拉在一起居中（垂直居中）
                strerch               拉伸
            6.flex-flow：符合属性 相当于同时设置了flex-direction和flex-wrap 
        -->
    <!-- 子项的常用属性
        1.flex 子项目占的份数
                flex属性定义子项目分配父盒子的剩余空间 用flex来表示占多少份数
                属性值为数字 数字为1 表示占总数中的1份 默认值为0
        2.align-self控制子项目自己在侧轴的排列方式
                align-self属性允许单个项目与其他项目不一样的对齐方式 可覆盖align-items属性
                默认值为auto 表示继承父元素的align-items属性 如果没有父元素 则等同于stretch
        3.order属性定义子项的排列顺序(前后排序) 
                数值越小  排列越靠前 默认为0 
                注：和z-index不一样-->

    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</body>
<style>
    .box {
        width: 600px;
        height: 400px;
        background-color: burlywood;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .item {
        width: 200px;
        height: 200px;
        background-color: rebeccapurple;
        color: wheat;

    }
</style>

</html>